<template>
	<page-body>
		<view class="page">
			<view class="flex benben-position-layout flex flex-wrap align-center zs_flex_0_higd"
				:style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx', }">
				<view class='flex flex-wrap align-center justify-between flex-sub zs_fd0_0_higd'>
					<view class='flex flex-wrap align-center zs_fd0_0_c0_higd' @tap.stop="handleJumpDiy"
						data-type="back" data-url="1">
						<text class='fu-iconfont2  zs_fd0_0_c0_c0_higd'>&#xE794;</text>
					</view>
					<view class='flex flex-wrap align-stretch justify-center'>
						<text class='zs_fd0_0_c1_c0_higd'>{{$t('AI助手')}}</text>
					</view>
					<view class='flex flex-wrap align-center justify-end zs_fd0_0_c0_higd'>
					</view>
				</view>

			</view>
			<view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>
			<!---flex布局flex布局开始-->
			<view class="flex flex-direction align-stretch benben-flex-layout zs_flex_1_higd">
				<view class='flex flex-direction align-stretch zs_fd1_0_higd'>
					<view class='flex flex-direction align-stretch zs_fd1_0_c0_higd content' ref="content">
					<template v-for='(item,key0) in list'>
							<view class='flex flex-direction align-stretch' :key='key0'>
								<view class='flex flex-wrap align-start zs_fd1_0_c0_c0_higd ' v-if=" item.me===false">
									<image class='zs_fd1_0_c0_c0_c0_higd' mode="aspectFit" :src='STATIC_URL+"144.png"'>
									</image>
									<view class='flex flex-wrap align-start zs_fd1_0_c0_c0_c1_higd'>
										<text>{{item.title}}</text>
									</view>
								</view>
								<view class='flex flex-wrap align-start justify-end zs_fd1_0_c0_c0_higd'
									v-if=" item.me===true">
									<view class='flex flex-wrap align-start zs_fd1_0_c0_c1_c0_higd'>
										<text>{{item.title}}</text>
									</view>
									<image class='zs_fd1_0_c0_c1_c1_higd' mode="aspectFill" :src='avatar'>
									</image>
								</view>
							</view>
						</template>

					</view>
					<view class='flex flex-direction flex-wrap align-stretch'>
						<view class='flex flex-wrap align-center zs_fd1_0_c1_c0_higd'>
							<image class='zs_fd1_0_c1_c0_c0_higd' mode="aspectFit" :src='STATIC_URL+"143.png"'></image>
							<text class='zs_fd1_0_c1_c0_c1_higd'>{{$t('猜你想问：')}}</text>
						</view>
						<view class='flex flex-wrap align-center zs_fd1_0_c1_c1_higd'>
							<template v-for='(item,key0) in wtlist'>
								<view class='flex flex-wrap align-center zs_fd1_0_c1_c1_c0_higd' :key='key0'
									@tap.stop="pushFunc(item.title)">
									<text>{{item.title}}</text>
								</view>
							</template>

							<!--     <view   class='flex flex-wrap align-center zs_fd1_0_c1_c1_c0_higd'      >
        <text   >{{$t('灭火器的使用方法？')}}</text>
</view>
 -->
							<!--     <view   class='flex flex-wrap align-center zs_fd1_0_c1_c1_c0_higd'      >
        <text   >{{$t('灭火器的使用方法？')}}</text>
</view>
 -->
						</view>
					</view>
				</view>
				<view class='flex flex-wrap align-center zs_fd1_1_higd'>
					<benben-input class='zs_fd1_1_c0_higd' type="text" :placeholder="$t('请输入问题')" confirm-type="done"
						:maxlength="-1" :adjust-position='false' placeholder-style="color:#999;font-size:28rpx"
						@confirm="pushFunc(key)" v-model="key" />
					<image class='zs_fd1_1_c1_higd' mode="aspectFit" :src='STATIC_URL+"142.png"'
						@tap.stop="pushFunc(key)"></image>
				</view>
			</view>

			<!---flex布局flex布局结束-->


		</view>
	</page-body>
</template>

<script>
	import {
		marked
	} from '@/common/utils/marked.js'
	export default {
		components: {},


		data() {
			return {
				"list": [{
						"me": false,
						"title": "您好有什么可以帮您"
					},
					// {
					// 	"me": true,
					// 	"title": "消防站怎么走"
					// }, {
					// 	"me": false,
					// 	"title": "操作步骤 (PASS口诀) 一、P - Pull (拔掉保险销): （1）找到灭火器顶部的保险销（通常是一个金属环或塑料环，插在压把之间）。 （2）用力拉出保险销。有些灭火器可能需要先拔掉一个小铅封或塑料卡子才能拔出保险销。 （3）注意：保险销拔出后，压把就能按下去，灭火剂就能喷出了。 二、A - Aim (瞄准火焰根部): 站稳身体，保持安全距离（通"
					// }, {
					// 	"me": true,
					// 	"title": "灭火器的使用方法"
					// }, {
					// 	"me": false,
					// 	"title": "提拔握压 ‌灭火器使用的四个步骤口诀为“提拔握压”‌，具体包括提起灭火器、拔掉保险销、握住喷管、压下把手喷射。  ‌灭火器使用四步口诀详解‌  ‌提‌：提起灭火器，使用前需检查压力表指针是否在绿色区域，确保灭火器处于可用状态。‌‌‌‌ 1 ‌拔‌：拔掉保险销或安全插销，这是启动灭火器的关键步骤。‌‌‌‌ ‌握‌：一只手握住喷管前端喷嘴，另一只手提灭火器把手，保持稳定。部分口诀中强调需瞄准火源根部，保持3-4米的安全距离。‌‌‌‌ ‌压‌：用力压下把手，对准火焰根部左右扫射，直至火势完全扑灭。‌‌"
					// },
				],
				"key": "",
				/** title【灭火器的使用方法】
				 *   title【灭火器的使用方法】
				 *   title【灭火器的使用方法】 **/
				"wtlist": [
					// 	{
					// 	"title": "灭火器的使用方法？"
					// }, {
					// 	"title": "消防安全知识？"
					// }, {
					// 	"title": "灭火器是什么？"
					// },
				],
				"API_loading": false
			};
		},
		computed: {

		},
		watch: {},
		onLoad(options) {

		},
		onUnload() {

		},
		onReady() {

		},
		onShow() {
			console.log(uni.getStorageSync('USER_INFO_7863').avatar)
			this.avatar = uni.getStorageSync('USER_INFO_7863').avatar
			console.log(this.avatar)
			this.getlist()
		},
		onHide() {

		},
		onResize() {

		},
		onPullDownRefresh() {

		},
		onReachBottom(e) {

		},
		onPageScroll(e) {

		},
		// mounted() {
		// 	this.$nextTick(() => {
		// 		console.log('666')
		// 	  this.scrollToBottom();
		// 	});
		// },
		methods: {
			// scrollToBottom() {
			//       this.$nextTick(() => {
			//         const content = this.$refs.content;
			// 		console.log('9999')
			// 		console.log(content)
			// 		console.log(content.scrollTop)
			// 		console.log(content.scrollHeight)
			//         content.scrollTop = content.scrollHeight; // 滚动到底部
			// 		content.scrollTop = 0; // 滚动到底部
			//       });
			//     },
			scrollToBottom() {
				const query = uni.createSelectorQuery().in(this);
				query.select('.content').boundingClientRect(rect => {
					rect.height; // 获取内容高度（可选）
					console.log(this.$refs.content.scrollHeight)
					this.$nextTick(() => { // 确保DOM更新完成后再设置scrollTop
						this.$refs.content.scrollTop = this.$refs.content.scrollHeight; // 滚动到底部
					});
				}).exec();
			},

			async getlist() {
				let dataxginfo = await this.$api.get(global.apiUrls.post6848fc0cb05f6, {

				});

				// if (dataxginfo.data.code != 1) {
				// 	this.$message.info(dataxginfo.data.msg);
				// 	return
				// }
				let infoxginfo = dataxginfo.data;
				this.wtlist = infoxginfo.data
			},
			//询问
			pushFunc(key) {
				console.log(key)
				if (this.API_loading) {
					return
				}
				uni.showLoading({})
				//this.list=[]
				this.list.push({
					"me": true,
					"title": key
				});
				this.list = [{
					"me": true,
					"title": key
				}]
				this.key = ''
				// const container = document.querySelector('.wdlist');
				// if (container) {
				// 	// 1. 创建观察器实例
				// 	const observer = new MutationObserver(() => {
				// 		container.scrollTo({
				// 			top: container.scrollHeight,
				// 			behavior: 'smooth'
				// 		});
				// 	});

				// 	// 2. 配置观察选项（监听子元素变化）
				// 	observer.observe(container, {
				// 		childList: true, // 监听子元素增删
				// 		subtree: true // 监听所有后代元素
				// 	});
				// }

				this.API_loading = true
				let titles = ''
				const data = JSON.stringify({
					"inputs": {},
					"query": key,
					"response_mode": "blocking",
					"conversation_id": "",
					"user": "abc-123",
					"files": [{
						"type": "",
						"transfer_method": "remote_url",
						"url": ""
					}]
					// chatId:  "2",
					//stream: false,//是否流式返回
					// detail: false,
					//messages: [
					//{
					// role: "user",
					// content: key,
					// },
					// ],
					// temperature: 0.3,
					//max_tokens: 2000,
				});

				// 假设我们要调用一个获取用户信息的接口
				uni.request({
					url: 'https://ai.saizhuge.com/v1/chat-messages', // 替换为你的接口地址
					method: 'POST', // 请求方式
					data: data,
					dataType: 'json',
					// headers: {
					// 	'Authorization': 'Bearer app-KGUWHdpqmWT6DEeYJFRx8xwu',
					// 	'Content-Type': 'application/json',
					// },
					header: {
						'Content-Type': 'application/json',
						'Authorization': 'Bearer app-5DMVQ5msiUu4QJp6hUAAllH5',
					},
					success: (res) => {
						// 请求成功时的处理
						console.log('数据获取成功:', res.data);
						console.log(res)
						console.log(res.data.answer)
						titles = res.data.answer
						// console.log(res.choices[0])
						// console.log(res.choices[0].message.content)
						//this.dj_list = infodj_list.data
						//textHtml=
						//titles=res.choices[0].message.content

						// titles=titles.replace(/\r?\n/g, "<br>")
						console.log(titles)
						// titles = marked(titles);
						console.log(titles)
						this.list.push({
							"me": false,
							"title": titles
						});

						// const container = document.querySelector('.wdlist');
						// if (container) {
						// 	// 1. 创建观察器实例
						// 	const observer = new MutationObserver(() => {
						// 		container.scrollTo({
						// 			top: container.scrollHeight,
						// 			behavior: 'smooth'
						// 		});
						// 	});

						// 	// 2. 配置观察选项（监听子元素变化）
						// 	observer.observe(container, {
						// 		childList: true, // 监听子元素增删
						// 		subtree: true // 监听所有后代元素
						// 	});
						// }
						this.API_loading = false
						this.scrollToBottom()
						uni.hideLoading()
						this.key = ''
					},
					fail: (err) => {
						// 请求失败时的处理
						console.error('数据获取失败:', err);
					}
				});

				return

				$.ajax({
					type: 'POST',
					url: 'https://ai.saizhuge.com/v1/chat-messages',
					//url: 'https://shuziren.zhongbenjiaoyu.com/dify/',
					"data": data,
					dataType: 'json',
					headers: {
						Authorization: 'Bearer app-KGUWHdpqmWT6DEeYJFRx8xwu',
						'Content-Type': 'application/json',
					},
					abortType: 0,

					success: (res) => {
						console.log(res)
						console.log(res.answer)
						titles = res.answer
						// console.log(res.choices[0])
						// console.log(res.choices[0].message.content)
						//this.dj_list = infodj_list.data
						//textHtml=
						//titles=res.choices[0].message.content

						// titles=titles.replace(/\r?\n/g, "<br>")
						titles = marked(titles);
						console.log(titles)
						this.list.push({
							"me": false,
							"title": titles
						});

						const container = document.querySelector('.wdlist');
						if (container) {
							// 1. 创建观察器实例
							const observer = new MutationObserver(() => {
								container.scrollTo({
									top: container.scrollHeight,
									behavior: 'smooth'
								});
							});

							// 2. 配置观察选项（监听子元素变化）
							observer.observe(container, {
								childList: true, // 监听子元素增删
								subtree: true // 监听所有后代元素
							});
						}
						this.API_loading = false
						this.key = ''
					}

				})

				//this.list.push({"me":false,"title":titles});
			}
		}
	};
</script>
<style lang="scss" scoped>
	.page {
		width: 100vw;
		overflow-x: hidden;
		min-height: calc(100vh - var(--window-bottom));
		background: #F8F8F8;
		background-size: 100% auto;

		.zs_flex_1_higd {
			height: 90vh;
			width: 100%;

			.zs_fd1_0_higd {
				width: 100%;
				height: 85%;

				.zs_fd1_0_c0_higd {
					height: 80%;
					padding: 32rpx;
					overflow-y: auto;
				}

				.zs_fd1_0_c1_c0_higd {
					padding: 0rpx 32rpx 0rpx 32rpx;

					.zs_fd1_0_c1_c0_c0_higd {
						width: 32rpx;
						height: 32rpx;
						border-radius: 0rpx;
					}

					.zs_fd1_0_c1_c0_c1_higd {
						color: rgba(9, 9, 9, 1);
						font-size: 28rpx;
						margin: 0rpx 0rpx 0rpx 12rpx;
					}
				}

				.zs_fd1_0_c1_c1_higd {
					padding: 0rpx 32rpx 0rpx 32rpx;
					margin: 24rpx 0rpx 0rpx 0rpx;
				}
			}

			.zs_fd1_1_higd {
				width: 100%;
				height: 10%;
				margin: auto 0rpx 0rpx 0rpx;
				background: rgba(255, 255, 255, 1);
				background-size: 100% auto;
				padding: 0rpx 32rpx 0rpx 32rpx;

				.zs_fd1_1_c0_higd {
					height: 80rpx;
					background: rgba(246, 246, 246, 1);
					width: 90%;
					border-radius: 36rpx;
					padding: 0rpx 0rpx 0rpx 24rpx;
				}

				.zs_fd1_1_c1_higd {
					width: 48rpx;
					height: 48rpx;
					border-radius: 0rpx;
					margin: 0rpx 0rpx 0rpx auto;
				}
			}
		}

		.zs_fd1_0_c0_c0_higd {
			margin: 0rpx 0rpx 24rpx 0rpx;
		}

		.zs_fd1_0_c0_c0_c0_higd {
			width: 80rpx;
			height: 80rpx;
			border-radius: 0rpx;
			margin: 0rpx 24rpx 0rpx 0rpx;
		}

		.zs_fd1_0_c0_c0_c1_higd {
			background: #FFFFFF;
			padding: 20rpx 32rpx 20rpx 32rpx;
			max-width: 80%;
			border-radius: 16rpx;
		}

		.zs_fd1_0_c0_c1_c0_higd {
			background: rgba(255, 233, 233, 1);
			padding: 20rpx 32rpx 20rpx 32rpx;
			max-width: 80%;
			border-radius: 16rpx;
		}

		.zs_fd1_0_c0_c1_c1_higd {
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
			margin: 0rpx 0rpx 0rpx 24rpx;
		}

		.zs_fd1_0_c1_c1_c0_higd {
			border: 1px solid #D32A29;
			background: rgba(255, 255, 255, 0.5);
			height: 64rpx;
			border-radius: 32rpx;
			padding: 0rpx 12rpx 0rpx 12rpx;
			margin: 0rpx 20rpx 20rpx 0rpx;
		}

		.zs_flex_0_higd {
			width: 750rpx;
			height: 88rpx;
			overflow: hidden;
			z-index: 10;
			top: 0rpx;
			background: #fff;
			background-size: 100% auto !important;

			.zs_fd0_0_higd {
				padding: 0rpx 32rpx 0rpx 32rpx;

				.zs_fd0_0_c1_c0_higd {
					font-size: 36rpx;
					font-weight: 700;
					color: #333333;
					line-height: 50rpx;
				}
			}
		}

		.zs_fd0_0_c0_higd {
			width: 120rpx;

			.zs_fd0_0_c0_c0_higd {
				font-size: 36rpx;
				color: #333;
			}
		}
	}
</style>
